C1TreeView のスタイル

TreeView for UWP の C1TreeView コントロールは、コントロールの外観を変更するために使用できるスタイルのプロパティを提供します。これらのスタイルの一部について、次の表で説明します。

スタイル	説明
Style	この要素のレンダリング時に使用されるスタイルを取得または設定します。これは依存プロパティです。

ClearStyle

TreeView for UWP は、コントロールのテンプレートを変更することなくコントロールの色を簡単に変更できる ComponentOne の新しい ClearStyle 技術をサポートします。色のプロパティをいくつか設定するだけで、C1TreeView コントロールのスタイルを簡単に設定できます。次の表に、C1TreeView でサポートされているプロパティを一覧します。

プロパティ	説明
Background	C1DockControl の塗りつぶしに使用される背景を取得または設定します。
MouseOverBrush	マウスポインタが置かれたコントロールを強調表示するために使用されるブラシを取得または設定します。
SelectedBackground	選択された項目の背景色を取得または設定します。

これらのプロパティを設定することで、C1TreeView の外観を完全に変更できます。たとえば、C1TreeView.Background プロパティを SkyBlue に設定する場合の XAML マークアップは次のようになります。

マークアップ	コードのコピー
<Xaml:C1TreeView Background="SkyBlue" x:Name="Tree"> <Xaml:C1TreeViewItem Header="ジャンル一覧"> <Xaml:C1TreeViewItem Header="文学"/> <Xaml:C1TreeViewItem Header="ノンフィクション"/> <Xaml:C1TreeViewItem Header="ビジネス"> <Xaml:C1TreeViewItem Header="経済学"/> <Xaml:C1TreeViewItem Header="マーケティング"/> </Xaml:C1TreeViewItem> </Xaml:C1TreeViewItem> </Xaml:C1TreeView>

マークアップ

コードのコピー

<Xaml:C1TreeView Background="SkyBlue" x:Name="Tree">
            <Xaml:C1TreeViewItem Header="ジャンル一覧">
                <Xaml:C1TreeViewItem Header="文学"/>
                <Xaml:C1TreeViewItem Header="ノンフィクション"/>
                <Xaml:C1TreeViewItem Header="ビジネス">
                    <Xaml:C1TreeViewItem Header="経済学"/>
                    <Xaml:C1TreeViewItem Header="マーケティング"/>
                </Xaml:C1TreeViewItem>
            </Xaml:C1TreeViewItem>
      </Xaml:C1TreeView>

C1TreeView は次のようになります。

その他のプロパティも試して、C1TreeView 要素の外観をすばやく変更してみてください。たとえば、次の XAML は、Background、MouseOverBrush、SelectedBackground の各プロパティを設定します。

マークアップ	コードのコピー
<Xaml:C1TreeView Background="SkyBlue" MouseOverBrush="Gold" SelectedBackground="Green" x:Name="Tree"> <Xaml:C1TreeViewItem Header="ジャンル一覧"> <Xaml:C1TreeViewItem Header="文学"/> <Xaml:C1TreeViewItem Header="ノンフィクション"/> <Xaml:C1TreeViewItem Header="ビジネス"> <Xaml:C1TreeViewItem Header="経済学"/> <Xaml:C1TreeViewItem Header="マーケティング"/> </Xaml:C1TreeViewItem> </Xaml:C1TreeViewItem> </Xaml:C1TreeView>

マークアップ

コードのコピー

<Xaml:C1TreeView Background="SkyBlue" MouseOverBrush="Gold" SelectedBackground="Green" x:Name="Tree">
            <Xaml:C1TreeViewItem Header="ジャンル一覧">
                <Xaml:C1TreeViewItem Header="文学"/>
                <Xaml:C1TreeViewItem Header="ノンフィクション"/>
                <Xaml:C1TreeViewItem Header="ビジネス">
                    <Xaml:C1TreeViewItem Header="経済学"/>
                    <Xaml:C1TreeViewItem Header="マーケティング"/>
                </Xaml:C1TreeViewItem>
            </Xaml:C1TreeViewItem>
      </Xaml:C1TreeView>

プロジェクトを実行すると、C1TreeView は次のようになります。

ヘッダー内にマウスポインタを置くと、ヘッダーは黄色になります。項目を選択すると、項目は緑色で表示されます。